<template>
  <div>
    <div class="art_div">
      <el-card shadow="always" class="art_card" 
        v-for="(item, index) in article.slice(
          (currentPage - 1) * pagesize,
          currentPage * pagesize
        )"
        :key="index"
      >
      <img :src="item.image">
      <h3>{{ item.title }}</h3>
      <span>{{ item.time }}</span>
      <p>{{ item.description }}</p>
      <span>{{ item.count }}</span>
      </el-card>
    </div>

    <div class="art_pagi">
      <el-pagination small layout="prev, pager, next" 
        :total="article.length"
        :page-size="pagesize"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      total: 0,
      pagesize: 4, // 每页显示的数据条数
      currentPage: 1,
      article: [
        {
          image: "https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png",
          title: "这是个汉堡",
          time: "2024",
          description: "很好吃的汉堡！！！",
          count: 5
        },
        {
          image: "https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png",
          title: "这是个汉堡",
          time: "2024",
          description: "很好吃的汉堡！！！",
          count: 5
        },
        {
          image: "https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png",
          title: "这是个汉堡",
          time: "2024",
          description: "很好吃的汉堡！！！",
          count: 5
        },
        {
          image: "https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png",
          title: "这是个汉堡",
          time: "2024",
          description: "很好吃的汉堡！！！",
          count: 5
        },
        {
          image: "https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png",
          title: "这是个汉堡",
          time: "2024",
          description: "很好吃的汉堡！！！",
          count: 5
        },
      ]
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val
    }
  }
}
</script>

<style scoped>
.art_pagi {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 0;
}
.art_div {
  width: 100%;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  flex-wrap: wrap;
  overflow: hidden;
  margin-bottom: 20px;
}
.art_div img {
  width: 100%;
}
.art_div p,h3{
  margin: 5px 0;
}
.art_card {
  width: 20%;
  height: 450px;
  box-sizing: border-box;
  margin: 20px;
}
</style>